HandleInput = (e) => {
  this.setState({
    username: e.target.value
  })
}
HandleTextArea = (e) => {
  this.setState({
    content: e.target.value
  })
}
HandleSelect = (e) => {
  this.setState({
    frame: e.target.value
  })
}
HandleRadio = (e) => {
  this.setState({
    sex: e.target.value
  })
}
HandleCheckbox = (e) => {
  // 如果点击的选中了，期望不选中
  // 如果点击的没选中，期望选中
  if (e.target.checked) {
    // 期望选中
    // 把 e.target.value 怼到数组里面
    this.setState({
      checkbox: [...this.state.checkbox, e.target.value]
    })
  } else {
    // 期望不选中，需要把 e.target.value 从 this.state.checkbox 中干掉
    // 先找到下标
    const index = this.state.checkbox.indexOf(e.target.value)
    if (index !== -1) {
      // 找到了，下面写法不 ok，因为不能直接修改原数据拉
      // this.state.checkbox.splice(idx, 1)
      // 1. 先拷贝一份元数据
      const copyCheckbox = [...this.state.checkbox]
      // 2. 删除拷贝的数据
      copyCheckbox.splice(index, 1)
      // 3. 用删除过后的拷贝的数据覆盖 this.state.checkbox
      this.setState({
        checkbox: copyCheckbox
      })
    }
  }
}